<template>
	<view class="py20">
		<uni-notice-bar v-if="showNotice" single="true" showIcon showGetMore text="尊敬的用户您有一条没有用的消息是心胸狭隘实打实的是的是的还是多喝水多喝水多喝水多喝水的话"></uni-notice-bar>
		<swiper style="margin-top: -50rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in bannerList">
				<view class="swiper-item">
					<image style="height: 300rpx;width: 100%;" :src="item" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<uni-section title="功能列表" type="line">
			<template v-slot:right>
				<text>更多</text>
			</template>
		</uni-section>
		
		<view class="container">
			<view @click="toTianqi" class="item" style="background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);">
				<view class="item-child justify-center align-center">
					<image src="/static/image/tianqi.png" style="width: 200rpx;height: 200rpx;" mode="aspectFill"></image>
				</view>
				<view class="item-child justify-center align-center">
					查询最新的天气预报信息
				</view>
			</view>
			<view @click="toXinwen" class="item" style="background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);">
				<view class="item-child justify-center align-center">
					<image src="/static/image/xinwen.jpg" style="width: 200rpx;height: 200rpx;" mode="aspectFill"></image>
				</view>
				<view class="item-child justify-center align-center" style="color: white;">
					查询最新的综合新闻信息
				</view>
			</view>
			<view @click="toMoYu" class="item" style="background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);">
				<view class="item-child justify-center align-center">
					<image src="/static/image/moyu.jpg" style="width: 200rpx;height: 200rpx;" mode="aspectFill"></image>
				</view>
				<view class="item-child justify-center align-center" style="color: white;">
					查询最新的摸鱼人日信息
				</view>
			</view>
			<view @click="toAvatar" class="item" style="background-image: linear-gradient(-225deg, #B6CEE8 0%, #F578DC 100%);">
				<view class="item-child justify-center align-center">
					<image src="/static/image/avatar.jpeg" style="width: 200rpx;height: 200rpx;" mode="aspectFill"></image>
				</view>
				<view class="item-child justify-center align-center" style="color: white;">
					查询最新的精选头像信息
				</view>
			</view>
			<view @click="toHoro" class="item" style="background-image: linear-gradient(-225deg, #7085B6 0%, #87A7D9 50%, #DEF3F8 100%);">
				<view class="item-child justify-center align-center">
					<image src="/static/image/horo/index.gif" style="width: 100%;height: 200rpx;" mode="aspectFill"></image>
				</view>
				<view class="item-child justify-center align-center" style="color: white;">
					查询最新的星座运势信息
				</view>
			</view>
			<view @click="toLiZhi" class="item" style="background-image: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);">
				<view class="item-child justify-center align-center">
					<image src="/static/image/lizhi.jpeg" style="width: 100%;height: 200rpx;" mode="aspectFill"></image>
				</view>
				<view class="item-child justify-center align-center" style="color: white;">
					查询最新的英文励志语录
				</view>
			</view>
			<view @click="toChouQian" class="item" style="background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);">
				<view class="item-child justify-center align-center">
					<image src="/static/image/chouqian.png" style="width: 100%;height: 200rpx;" mode="aspectFit"></image>
				</view>
				<view class="item-child justify-center align-center" style="color: white;">
					查询最新的随机抽签信息
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue';

	const showNotice=ref(true);
	const bannerList=ref(['/static/image/banner/banner01.png','/static/image/banner/banner02.png','/static/image/banner/banner03.png'])
	
	function toTianqi(){
		uni.navigateTo({url: '/pages/tianqi'});
	}
	
	function toXinwen() {
		uni.navigateTo({url: '/pages/xinwen'});
	}
	
	function toMoYu() {
		uni.navigateTo({url: '/pages/moyu'});
	}
	
	function toAvatar () {
		uni.navigateTo({url: '/pages/avatar'});
	}
	
	function toHoro () {
		uni.navigateTo({url: '/pages/horo'});
	}
	
	function toLiZhi () {
		uni.navigateTo({url: '/pages/lizhi'});
	}
	
	function toChouQian () {
		uni.navigateTo({url: '/pages/chouqian'});
	}
</script>
<style scoped>
	/* 常用web 好看的 渐变色
	https://webgradients.com/ */
	.container{ /* 定义功能列表的view样式 */
		display: flex; /* 使用flex布局(弹性布局) */
		flex-wrap: wrap; /* flex布局中的元素可以自动换行 */
		padding: 20rpx;
		/*方案1 gap: 20rpx; */ /* 设置单元格(行和列)之间的间距 */
		/* 方案2 */
		margin-right: -20rpx; /* 补偿右侧margin */
		margin-bottom: -20rpx; /* 补偿底部margin */
	}
	.item{ /* 定义功能列表内部view样式 */
		display: flex;
		height: 200rpx; /* 定义每个元素的高度为200rpx */
		background-color: burlywood;
		/* 方案1 */
		/* width: calc(50% - 20rpx/2); */ /* 关键;让每个元素占整个屏幕的50% */
		/* 方案2 */
		width: calc(50% - 20rpx); /* 关键;让每个元素占整个屏幕的50% */
		/* 方案2 */
		margin-right: 20rpx; /* 补偿右侧margin */
		margin-bottom: 20rpx; /* 补偿底部margin */
		/* 有边框时添加 */
		/* border: 1px solid red; */ /* 演示效果,添加边框样式 */
		/* box-sizing: border-box; */ /* 关键:确保边框/内边距不撑大元素 */
	}
	/* 遇到奇数行，整行设置宽度设置为100% */
	.item:nth-last-child(1):nth-child(odd){
		width: 100%;
	}
	.item-child{
		display: flex;
		width: 50%;
		/* border: 1px solid red; */
	}
	
</style>
